<template>
	<view class="pickup-code-page">
		<!-- 取餐号显示 -->
		<view class="pickup-number-section">
			<view class="number-container">
				<view class="number-label">取餐号</view>
				<view class="number-value">{{ dataInfo.orderSn || '-' }}</view>
			</view>
		</view>
		<!-- 商品列表 -->
		<view class="order-items-section">
			<!-- 店铺名称 -->
			<view class="store-section">
				<view class="store-name">{{ dataInfo.venueName || '-' }}</view>
			</view>
			<view 
				v-for="item in dataInfo.venueGoodsOrdersDetailEntityList" 
				:key="item.id"
				class="item-row"
			>
				<image :src="item.cover" class="item-image"></image>
				<view class="item-info">
					<view class="item-name">{{ item.goodsName || '' }}</view>
					<view class="item-specs">{{ item.goodsDetail || '' }}</view>
				</view>
				<view class="item-right">
					<view class="item-quantity">x{{ item.quantity || '' }}</view>
					<view class="item-price">¥{{ item.unitPrice || '' }}</view>
				</view>
			</view>
		</view>

		<!-- 费用明细 -->
		<view class="payment-detail-section">
			<view class="detail-row">
				<text class="detail-label">配送费</text>
				<text class="detail-value">¥0</text>
			</view>
		<!-- 	<view class="detail-row">
				<text class="detail-label">小计</text>
				<text class="detail-value">¥{{ dataInfo.totalAmount || '' }}</text>
			</view> -->
			<!-- <view class="detail-row">
				<text class="detail-label">优惠券</text>
				<text class="detail-value discount">-¥12</text>
			</view> -->
			<view class="detail-row total">
				<text class="detail-label">合计</text>
				<text class="detail-value">¥{{ dataInfo.totalAmount || '' }}</text>
			</view>
		</view>
		
		<!-- 订单信息 -->
		<view class="order-info-section">
			<view class="section-title">订单信息</view>
		<!-- 	<view class="info-item">
				<text class="info-label">订单编号</text>
				<text class="info-value">{{ dataInfo.pingppChargeId || '' }}</text>
			</view> -->
			<view class="info-item">
				<text class="info-label">下单时间</text>
				<text class="info-value">{{ createdAt || '' }}</text>
			</view>
		</view>
	</view>
	<!-- loading加载 -->
	<fui-loading type="col" v-if="loadActive" :isFixed="true" :isMask="true"></fui-loading>
</template>

<script setup>
	// 响应式数据
	const pickupNumber = ref('T6001')
	const storeName = ref('上海龙之梦店')
	const orderNumber = ref('732732827539003')
	const orderTime = ref('2025-05-16 10:30')
	const estimatedTime = ref('2025-05-16 10:45')
	const paymentMethod = ref('支付宝支付')
	const loadActive = ref(false);
	const dataInfo = ref({});
	const createdAt = ref(null);

	// 订单商品
	const orderItems = ref([
		{
			id: 1,
			name: '美式咖啡',
			specs: '中杯/加冰/微糖',
			price: 29,
			count: 1,
			image: '/static/img/bg1.png'
		},
		{
			id: 2,
			name: '海盐焦糖冰美式',
			specs: '中杯/加冰/微糖',
			price: 32,
			count: 1,
			image: '/static/img/bg1.png'
		}
	])

	/**
	 * 获取订单详情
	 */
	const getDetails = async (id) => {
		loadActive.value = true;
		const res = await uni.api.goodsOrderDetail({
			businessId: id
		})
		if (res.code === 0 && res.data) {
			dataInfo.value = res.data || {};
			createdAt.value = uni.$uv.timeFormat(res.data.createdAt,'yyyy-mm-dd hh:MM:ss');
			console.log(createdAt.value);
		}
		loadActive.value = false
	}

	// 页面加载
	onLoad((options) => {
		getDetails(options.businessId)
	})
</script>

<style scoped lang="scss">
	.pickup-code-page {
		background: #f5f5f5;
		min-height: 100vh;
		padding: 0;
		width: 100%;
		box-sizing: border-box;
		overflow-x: hidden;
	}

	/* 取餐号显示 */
	.pickup-number-section {
		background: #fff;
		padding: 80rpx 32rpx 60rpx;
		text-align: center;

		.number-container {
			.number-label {
				font-size: 28rpx;
				color: #999;
			}

			.number-value {
				font-size: 70rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 20rpx;
			}

		}
	}

	/* 店铺名称 */
	.store-section {
		background: white;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #f1f1f1;
		.store-name {
			font-size: 30rpx;
			color: #333;
			text-align: left;
		}
	}

	/* 订单信息 */
	.order-info-section {
		background: #fff;
		padding: 32rpx;
		margin-top: 20rpx;

		.section-title {
			font-size: 32rpx;
			font-weight: 500;
			color: #333;
			margin-bottom: 24rpx;
		}

		.info-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 16rpx 0;
			border-bottom: 1px solid #f0f0f0;

			&:last-child {
				border-bottom: none;
			}

			.info-label {
				font-size: 28rpx;
				color: #666;
			}

			.info-value {
				font-size: 28rpx;
				color: #333;
			}
		}
	}

	/* 商品列表 */
	.order-items-section {
		background: #fff;
		padding: 32rpx;
		margin-top: 20rpx;

		.item-row {
			display: flex;
			align-items: flex-start;
			padding: 24rpx 0;
			border-bottom: 1px solid #f0f0f0;

			&:last-child {
				border-bottom: none;
			}

			.item-image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 16rpx;
				margin-right: 24rpx;
				flex-shrink: 0;
			}

			.item-info {
				flex: 1;

				.item-name {
					font-size: 32rpx;
					color: #333;
					margin-bottom: 12rpx;
					font-weight: 500;
				}

				.item-specs {
					font-size: 28rpx;
					color: #999;
				}
			}

			.item-right {
				text-align: right;
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				justify-content: space-between;
				height: 120rpx;

				.item-quantity {
					font-size: 28rpx;
					color: #666;
					margin-bottom: 12rpx;
				}

				.item-price {
					font-size: 32rpx;
					color: #333;
					font-weight: 500;
				}
			}
		}
	}

	/* 费用明细 */
	.payment-detail-section {
		background: #fff;
		padding: 32rpx;
		margin-top: 20rpx;

		.detail-row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 16rpx 0;

			&.total {
				border-top: 1px solid #f0f0f0;
				padding-top: 20rpx;
				margin-top: 8rpx;

				.detail-label,
				.detail-value {
					font-size: 32rpx;
					font-weight: 600;
				}
			}

			.detail-label {
				font-size: 28rpx;
				color: #666;
			}

			.detail-value {
				font-size: 28rpx;
				color: #333;

				&.discount {
					color: #ff4757;
				}
			}
		}
	}

	/* 底部按钮 */
	.bottom-actions {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		padding: 24rpx 32rpx;
		box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
		z-index: 999;
		display: flex;
		gap: 16rpx;
		width: 100%;
		box-sizing: border-box;
	}
</style>